<template>
  <jm-modal-view :config="config" @checkData="(obj) => checkData(obj)" ref="jm_modal_view">

    <!-- ================= 弹窗 插槽 ======================= -->
    <template #dialog_slot="scope">
      <data-detail v-if="childData.checkref == 'data_detail'" ref="data_detail" @close-dialog="closeDialog"></data-detail>
      <!-- <data-detail2 v-if="childData.checkref == 'data_detail2'" ref="data_detail2" @close-dialog="closeDialog"></data-detail2> -->
    </template>

    <!-- 自定义 字段 处理插槽 -->
    <template #cashType="scope">
      <el-tag size="small" v-if="scope.row.cashType == 1">月结</el-tag>
      <el-tag size="small" v-if="scope.row.cashType == 2">周结</el-tag>
      <el-tag size="small" v-if="scope.row.cashType == 3">日结</el-tag>
    </template>
    <template #checkTime="scope">
      {{ scope.row.checkTime?$filters.DateFilter(scope.row.checkTime, 'yyyy-MM-dd hh:mm:ss'):'-' }}
    </template>
    <template #payTime="scope">
      {{ scope.row.payTime?$filters.DateFilter(scope.row.payTime, 'yyyy-MM-dd hh:mm:ss'):'-' }}
    </template>
    <template #status="scope">
      <el-tag size="small" type="warning" v-if="scope.row.status == 1">审核中</el-tag>
      <el-tag size="small" type="primary" v-if="scope.row.status == 2">审核通过</el-tag>
      <el-tag size="small" type="success" v-if="scope.row.status == 3">支付完成</el-tag>
    </template>
    <template #withdrawalType="scope">
      <el-tag size="small" type="primary" v-if="scope.row.paymentInfo?(scope.row.paymentInfo.withdrawalType == 1?true:false):false" drak>支付宝</el-tag>
      <el-tag size="small" type="primary" v-if="scope.row.paymentInfo?(scope.row.paymentInfo.withdrawalType == 2?true:false):false" drak>企业银行</el-tag>
      <el-tag size="small" type="primary" v-if="scope.row.paymentInfo?(scope.row.paymentInfo.withdrawalType == 3?true:false):false" drak>个人银行</el-tag>
    </template>

    <template #amount="scope">
      {{ parseFloat((parseFloat(scope.row.amount) / 100).toFixed(4)) }}
    </template>
    <template #realAmount="scope">
      {{ parseFloat((parseFloat(scope.row.realAmount) / 100).toFixed(4)) }}
    </template>
    
    
    <!-- 自定义 表格事件 处理插槽 -->
    <template #table_btn="scope">
      <el-button size="small" type="primary" v-if="scope.row.checkTime && !scope.row.payTime" @click="payMoney({ data: scope.row, index: scope._index, checkref: 'data_detail' })">支付通过</el-button>
      <el-button size="small" type="success" v-if="!scope.row.checkTime" @click="statMoney({ data: scope.row, index: scope._index, checkref: 'data_detail', type: 'pass' })">审核通过</el-button>
      <!-- <el-button size="small" type="danger" @click="statMoney({ data: scope.row, index: scope._index, checkref: 'data_detail', type: 'unpass' })">拒绝通过</el-button> -->
    </template>

    <!-- 自定义 弹窗 提交事件 -->
    <template #dialog_btn="scope">
      <el-button v-if="childData.checkref == 'data_detail'" type="primary" 
        @click="childDataOperation({
          checkref: 'data_detail',
          fn: 'submitData'
        })">
        保存
      </el-button>
      <!-- <el-button v-if="childData.checkref == 'data_detail2'" type="primary" 
        @click="childDataOperation({
          checkref: 'data_detail2',
          fn: 'submitData'
        })">
        保存2
      </el-button> -->
    </template>

    <!-- 自定义 筛选条件 插槽 -->
    <template #search_slot="scope">
      <div class="flexbox" style="margin-bottom:10px;">
        <div class="searchContent">企业名称：</div>
        <div class="searchBox" style="width:100%;">
          <el-input @input="advSearch()" placeholder="请输入企业名称" v-model="scope.adv_search.enterpriseName" size="small"></el-input>
        </div>
      </div>
      <div class="flexbox" style="margin-bottom:10px;">
        <div class="searchContent">企业名称：</div>
        <div class="searchBox" style="width:100%;">
          <el-input @input="advSearch()" placeholder="请输入企业名称" v-model="scope.adv_search.value" size="small"></el-input>
        </div>
      </div>
    </template>

    <!-- 自定义右键事件框 -->
    <template #contextMenu_slot="scope">
      <div class="clickitem" @click="contextMenuClick(scope.row)">
        <div class="itemleft">功能4</div>
        <div class="itemright"></div>
      </div>
    </template>

  </jm-modal-view>
</template>

<script setup>
  import DataDetail from './detail.vue'
  // import DataDetail2 from './detail2.vue'


  import { ref, nextTick, inject } from 'vue'
  
  import { useStore } from 'vuex'
  // 注入全局utils工具js
  const $utils = inject('$utils')
  // 注入全局filters工具js
  const $filters = inject('$filters')
  // 定义store
  const store = useStore()

  // 获取到的父组件给子组件的值
  const childData = ref({})
  // 定义ref值
  const data_detail = ref()
  const jm_modal_view = ref()

  // 自定义弹出内容ref
  // const data_detail2 = ref()
  
  // 配置模板表单数据
  const config = ref({
    noAdd: true,
    breadcrumb: ['提现审核列表'],
    // 是否开启右键事件
    openContextMenu: false,
    // 基础增删改查配置
    operation: {
      // 获取表格数据链接
      get_data_url: '/Api/Cash/GetCashPagedList',
      // 查询表格详情链接
      get_detaildata_url: '',
      // 删除表格数据连接
      del_data_url: '/Api/Cash/Remove',
      // 编辑列表
      checkref: 'data_detail'
    },
    // 表格内容配置
    table_config: {
      noEdit: true,
      // opeWidth: 240,
      opeWidth: 150,
      column: [
        {
          prop: 'userName',
          label: '用户名'
        },
        {
          prop: 'amount',
          label: '申请金额',
          slot: true,
        },
        {
          prop: 'tax',
          label: '税率'
        },
        {
          prop: 'realAmount',
          label: '到账金额',
          slot: true,
        },
        {
          prop: 'cashType',
          label: '提现方式',
          slot: true,
        },
        {
          prop: 'checkTime',
          label: '审核时间',
          slot: true,
          width: 150
        },
        {
          prop: 'payTime',
          label: '支付时间',
          slot: true,
          width: 150
        },
        {
          prop: 'status',
          label: '提现状态',
          slot: true,
          width: 90
        },
        {
          prop: 'withdrawalType',
          label: '提款方式',
          slot: true,
          // prop: 'paymentInfo',
        },
        {
          prop: 'paymentInfo.accountNumber',
          label: '账号',
          width: 160
        },
        {
          prop: 'paymentInfo.realName',
          label: '真实姓名'
        },
        {
          prop: 'paymentInfo.mobile',
          label: '手机号码',
          width: 110
        },
        {
          prop: 'paymentInfo.idCard',
          label: '身份证',
          width: 160
        },
        {
          prop: 'paymentInfo.address',
          label: '身份证地址',
          width: 90
        },
        {
          prop: 'paymentInfo.bank',
          label: '银行',
          width: 160
        },
        {
          prop: 'paymentInfo.openingBank',
          label: '开户行',
          width: 160
        }
      ]
    }
    
  })

  // ============================================================================= 自定义事件区域 ====================================================================

  function statMoney (obj) {
    let confirmText = ''
    if (obj.type == 'pass') {
      confirmText = '审核通过'
    } else {
      confirmText = '审核不通过'
    }
    $utils.post({
			url: '/Api/Cash/Check',
			params: {
        id: obj.data.id
      },
      confirm: true,
      confirmText: '是否【审核通过】？',
      showLoading: true,
			ok: (res) => {
        jm_modal_view.value.getData()
			}
		})
  }
  
  function payMoney (obj) {
    $utils.post({
			url: '/Api/Cash/Pay',
			params: {
        id: obj.data.id
      },
      confirm: true,
      confirmText: '是否【已支付】？',
      showLoading: true,
			ok: (res) => {
        jm_modal_view.value.getData()
			}
		})
  }




  // ================================================================================================================================================================

  
  // 保存数据提交方法
  function childDataOperation(obj) {
    // 自定义入参可为空
    let resData = {}
    eval(`${obj.checkref}.value.${obj.fn}({
      data: ${JSON.stringify(resData)}
    })`)
  }

  // 公共模板返回数据emit事件
  async function checkData(obj) {
    childData.value = obj
    await nextTick()
    const resData = obj.data
    eval(`${obj.checkref}.value.${obj.fn}({
      data: ${JSON.stringify(resData)}
    })`)
  }

  // 设置弹窗宽度
  function setDialogWidth (str) {
    config.value.dialog_width = str
  }
  // 设置弹窗标题
  function setDialogTitle (str) {
    config.value.dialog_title = str
  }

  // 关闭弹窗事件
  function closeDialog(flag) {
    jm_modal_view.value.closeDialog(flag)
  }
  
  // ----------------- 右键点击选择菜单事件 -------------------------
  function contextMenuClick(item) {
    console.log(item)
    store.commit('set_pop_attr', {
      pop_show: false
    })
  }

  // 
  // function diyBtn(obj) {
  //   const sendobj = {
  //     data: obj.data,
  //     checkref: obj.checkref,
  //     fn: 'initData'
  //   }
  //   jm_modal_view.value.diyBtnFn(sendobj)
  // }
  // 高级筛选条件传入并搜索
  function advSearch() {
    jm_modal_view.value.advSearch()
  }

</script>

<style scoped>

</style>